<template>
  <div>
    <ul>
      <li v-for="item in menuItems" :key="item.path"
        class="animate__animated animate__flipInX"
        >
        <router-link :to="item.path">{{ item.type }}</router-link>
      </li>
    </ul>
  </div>

</template>
<script setup lang="ts">

import { defineProps } from 'vue'
defineProps<{
  menuItems: { type: string, path: string }[]
}>()


</script>
<style scoped>
div{
  height: 64px;
  width: 100%;
  background-color: rgb(255, 255, 255, 0.6);
  text-align: center;
}

ul {
  list-style: none;
  display: inline-flex;
  align-items: center;
  li {
    line-height: 64px;
    padding: 0 16px;
    font-size: 14px;
    white-space: nowrap;
  }

  li:hover {
      background-color: #fff;
  }
}

</style>
